<template>
  <div class="jianDingList-page">
    <Menus title="鉴定机构查询" :home="true" />
    <div class="jianding-list-head">
      <div class="content">
        <h1>{{type}}</h1>
        <div class="intro">
          <strong>{{currentarea}}</strong>
          <p> 共
            <span>{{currentjdofficelist.length}}</span> 家机构</p>
        </div>
        <a href="#" @click="show_select_areacode = true" class="btn btn-default btn-lg btn-success">查询其它州市机构</a>
      </div>
    </div>
    <div class="jianding-list">

      <div class="lists">

        <div class="item" v-for="(item, index) in currentjdofficelist" :key="'key-'+index">
          <router-link :to="{name: 'JDPost', params: {jdoffice: item}}">
            <div class="content">
              <div class="name">{{ item.name }}</div>
              <ul>
                <li>
                  <label>简介：</label>
                  <div>{{ item.desc }}
                  </div>
                </li>
                <li>
                  <label>地址：</label>
                  <div>{{ item.address }}</div>
                </li>
                <li>
                  <label>电话：</label>
                  <div>{{ item.tell }}</div>
                </li>
              </ul>
            </div>
          </router-link>
        </div>

      </div>

      <div class="btns">
        <p>如果想要查询其他州市 办理“{{ type }}”的机构，请点击</p>
        <a href="#" @click="show_select_areacode = true" class="btn btn-default btn-lg">查询其它州市机构</a>
      </div>

    </div>
    <div class="select_area" v-if="show_select_areacode">
      <div class="wrap">
        <div class="ht">请选择地区</div>
        <div class="content">
          <a v-for="(item,key) in $root.area" :key="'key-'+key" @click="changeArea(key)">
            <span>{{item.name}}</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Menus from '../components/Menu'
import api from '../datas/api'
export default {
  components: {
    Menus
  },
  data() {
    return {
      type: '',
      currentarea: '',
      currentareacode: 0,
      currentjdofficelist: [],
      show_select_areacode: false
    }
  },
  mounted() {
    this.type = this.$route.params.type
    this.currentarea = this.$root.config.web_area
    this.currentareacode = this.$root.config.web_code
    this.getJdoffice()
    console.log(this.$route)
  },
  methods: {
    async getJdoffice() {
      this.$loading.show()
      let data = await this.$get(
        api.jiandingoffice + this.currentareacode + '&molds=' + this.type
      )
      this.currentjdofficelist = data.result.data
      this.$loading.hide()
    },
    changeArea(code) {
      this.currentarea = this.$root.area[code].alias
      this.currentareacode = code
      this.getJdoffice()
      this.show_select_areacode = false
    }
  },
  beforeRouteUpdate (to, from, next) {
    if (from.name !== 'JDPost') {
      this.type = this.$route.params.type
      this.currentarea = this.$root.config.web_area
      this.currentareacode = this.$root.config.web_code
      this.getJdoffice()
      next()
    } else {
      next()
    }
  }
}
</script>
<style lang="scss">
.select_area {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.5);
  .wrap {
    background: #fff;
    border-radius: 10px;
    width: 1200px;
    margin: 25px auto;
    padding: 35px;
    text-align: center;
    .ht {
      font-size: 28px;
      padding-bottom: 20px;
      color: #555;
    }
    .content {
      display: flex;
      flex-wrap: wrap;
      a {
        width: 33.33%;
        span {
          padding: 15px 0;
          display: block;
          font-size: 20px;
          background: #eee;
          margin: 0 10px 10px 0;
        }
      }
    }
  }
}
.jianDingList-page {
  padding-top: 260px;
}
.jianding-list-head {
  padding: 25px 0;
  background: #fff;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
  position: fixed;
  top: 159px;
  left: 0;
  right: 0;
  width: 100%;
  .content {
    display: flex;
    align-items: center;
    width: 1280px;
    margin: 0 auto;
  }
  h1 {
    font-size: 36px;
    padding: 0 30px 0 0;
    margin: 0;
    font-weight: normal;
  }
  .intro {
    border-left: 1px solid #ddd;
    padding-left: 30px;
    font-size: 18px;
    margin-right: 30px;
    line-height: 1.2;
    p {
      font-size: 16px;
      margin: 0;
      color: #999;
      span {
        color: red;
      }
    }
  }
}
.jianding-list {
  flex: 1;
  .btns {
    padding: 30px 0 100px;
    border-top: 1px dashed #ccc;
    text-align: center;
    p {
      font-size: 18px;
      color: #666;
    }
  }
  .lists {
    flex: 1;
    width: 1280px;
    margin: 50px auto;
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 50%;
      .content {
        border-radius: 10px;
        background: #fff;
        padding: 30px;
        margin: 0 25px 25px 0;
        height: 300px;
      }
      .name {
        color: #0a57bc;
        font-size: 24px;
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px dashed #ddd;
        font-weight: bold;
      }
      ul {
        list-style: none;
        padding: 0;
        font-size: 16px;
        li {
          display: flex;
          margin-bottom: 15px;
          color: #666;
          label {
            width: 50px;
            flex-shrink: 0;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>
